<template>
  <div>
    <!-- 背景 -->
    <!-- <img src="@/images/csbg.png" class="login_over" /> -->
    <div class="draggable-item bdtp" v-for="item in image" :key="item.index">
      <img :src="item.src" />
    </div>
    <div
      v-for="(image, index) in images"
      :key="index"
      class="draggable-item bdrg"
      :style="{ top: image.y + 'px', left: image.x + 'px' }"
      @mousedown="startDragging(index, $event)"
    >
      <img :src="image.src" alt="Drappable Image" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    image: [],
    images: []
  },
  data() {
    return {
      draggingIndex: -1,
      offsetX: 0,
      offsetY: 0
    }
  },
  methods: {
    startDragging(index, event) {
      this.draggingIndex = index
      const rect = event.target.getBoundingClientRect()
      this.offsetX = event.clientX - rect.left
      this.offsetY = event.clientY - rect.top
      // 添加mousemove和mouseup事件监听器
      document.addEventListener('mousemove', this.handleDragging)
      document.addEventListener('mouseup', this.stopDragging)
    },
    handleDragging(event) {
      if (this.draggingIndex !== -1) {
        // 更新拖拽的图片位置
        // eslint-disable-next-line vue/no-mutating-props
        this.images[this.draggingIndex].x = event.clientX - this.offsetX
        // eslint-disable-next-line vue/no-mutating-props
        this.images[this.draggingIndex].y = event.clientY - this.offsetY
        // 处理重合的逻辑
        this.checkCollision()
      }
    },
    stopDragging() {
      // 移除mousemove和mouseup事件监听器
      document.removeEventListener('mousemove', this.handleDragging)
      document.removeEventListener('mouseup', this.stopDragging)
    },
    checkCollision() {
      // 检查图片重合的逻辑
      const draggedImage = this.image[0]
      console.log(this.draggingIndex)
      // const draggedImage = this.images[this.draggingIndex];
      // console.log(draggedImage)
      for (let i = 0; i < this.images.length; i++) {
        // if (i !== this.draggingIndex) {
        // }
        const targetImage = this.images[i]
        // 判断是否有部分重叠
        if (this.isPartialOverlap(draggedImage, targetImage)) {
          // console.log('重合了可以做操作了')
          // alert('重合了可以做操作了')
          // 处理重叠的逻辑
          //销毁然后展示新的图片即可
          //可以作为组件 传进 图片1 图片2 图片三 图片12重合删除图片一二 然后展示图片3即可
          if (this.images[0].src == require('@/images/dcxz.png')) {
            console.log('重合了')
            this.$emit('tctipsfn', '采血针已安装完成')
          }
          if (this.images[0].src == require('@/images/dcxsz.png')) {
            // this.$emit('tctipsfn', '采血试纸已经插入血糖仪')
            // console.log('重合了')
            this.$emit('ertipsfn', '')
            this.$emit('imagefn', [
              {
                src: require('@/images/dxty.png'),
                x: 1000,
                y: 210,
                width: 249,
                height: 587
              }
            ])
            this.$emit('imagesfn', [
              {
                src: require('@/images/dxty.png'),
                x: 1000,
                y: 210,
                width: 249,
                height: 587
              }
            ])
            this.$emit('xybshowfn', true)
          }
          if (this.images[0].src == require('@/images/dmq.png')) {
            // this.$emit('tctipsfn', '采血试纸已经插入血糖仪')
            // console.log('重合了')
            this.$emit('ertipsfn', '')
            this.$emit('tctipsfn', '消毒采血部位共两次，待酒精自然晾干方可采血')
          }
          if (this.images[0].src == require('@/images/dcxb.png')) {
            // this.$emit('tctipsfn', '采血试纸已经插入血糖仪')
            // console.log('重合了')
            this.$emit('ertipsfn', '')
            this.$emit('cxshowfn')
            this.$emit('xybshowfn', true)
          }
        }
      }
    },
    isPartialOverlap(image1, image2) {
      // 判断两个图片是否有部分重叠
      return (
        image1.x < image2.x + image2.width &&
        image1.x + image1.width > image2.x &&
        image1.y < image2.y + image2.height &&
        image1.y + image1.height > image2.y
      )
    }
  }
}
</script>

<style scoped>
.draggable-item {
  position: absolute;
  cursor: move;
}
</style>
